<template>
  <div class="Order">
    <el-table :data="orderData" border style="width: 100%">
      <el-table-column prop="orderDetail" align="center" label="产品图片" width="130">
      <template v-slot="scope">
        <el-avatar shape="square" :size="80" fit="scale-down" 
						:src="scope.row.orderDetail[0].imageUrl">
            </el-avatar>
      </template>
      </el-table-column>
      <el-table-column prop="order_id" align="center" label="订单编号" width="130">
      </el-table-column>
      <el-table-column prop="orderDetail[0].productName" align="center" label="产品名称">
      </el-table-column>
      <el-table-column prop="orderDetail[0].quantity" align="center" label="数量">
      </el-table-column>
      <el-table-column prop="total_fee" align="center" label="总价格)">
      </el-table-column>
      <el-table-column prop="create_time" align="center" label="创建时间">
      </el-table-column>
      <el-table-column prop="pay_status" width="100" align="center" label="支付状态">
        <template v-slot="{row}">
            {{row.pay_status===1?"已支付":"未支付"}}
        </template>
      </el-table-column>
      <el-table-column prop="order_status" width="100" align="center" label="订单状态">
          <template v-slot="{row}">
            <span v-if="row.order_status==0">未提交</span>
            <span v-else-if="row.order_status == 1">提交成功</span>
						<span v-else-if="row.order_status == 2">已经取消</span>
						<span v-else-if="row.order_status == 3">无效订单</span>
						<span v-else-if="row.order_status == 4">交易关闭</span>
						<span v-else-if="row.order_status == 5">退货</span>
          </template>
      </el-table-column>
      <el-table-column prop="opration" align="center" label="操作">
          <template v-slot="{row}">
              <el-button type="primary" v-hasPay="[row.pay_status,row.order_status]"
              icon="iconfont icon-chongzhi"> 去支付 </el-button>
              <el-button type="danger" icon="el-icon-delete"> 删除 </el-button>
          </template>
          
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import * as api from "@/api/pay"
export default {
  data() {
    return {
      orderData:[]
    }
  },
  created(){
    // 获取订单
    this.getOrderList()
  }
  ,
  methods: {
    getOrderList() {
      api.getOrderApi()
        .then(res => {
          // console.log(res.data)
          this.orderData=res.data.data
        })
    }
  },
  directives:{
    hasPay:{
      inserted(el,binding) {
        let [pay_status,order_status] = binding.value;
        let className =el.className;
        if(pay_status!==0||order_status!==1){
            el.disabled=true;
            el.className= className + " " + "is-disabled";
        }
      }
    }
  },
  meta: {
    title: "order",
    icon: "iconfont icon-dd",
  }
}
</script>